<template>
  <div class="page-warp">
    <div class="page-warp-layout">
      <div class="page-warp-crumbs mt-12">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/profile/myAgents' }">我的分身</el-breadcrumb-item>
          <el-breadcrumb-item >创建分身</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="page-warp-content mt-24 flex-col align-items-center">
        <div class="flex-row align-items-center space-between w-b100">
            <div class="page-warp-avatar" :style="{background:'url('+curdata.avatar+') center center no-repeat #fff'}">
              <div class="page-warp-avataredit pointer">
                <el-upload
                    ref="uploadRef"
                    class="upload-demo"
                    action="https://api.bytesbay.cn/bolePin/user/uploadPicture"
                    :auto-upload="true"
                    :show-file-list="false"
                    name="filename"
                    :headers="updataParam"
                    :on-success="onSuccess"
                  >
                  <template #trigger>
                    <el-icon :size="20" color="#999">
                      <Edit />
                    </el-icon>
                  </template> 
                </el-upload>
              </div>
              <div class="page-warp-avatarText pointer" @click="imgMathBtn">随机生成</div>
            </div> 
          <div class="flex-row align-items-center">
            <el-button @click="copyItem" :loading="loading" type="primary">克隆分身</el-button>
            <div class="ml-12 pointer">
              <el-tooltip
                class="box-item"
                effect="dark"
                content="基于简历生成提示语和开场白"
                placement="top"
              >
                <el-icon size="16"><Warning /></el-icon>
              </el-tooltip>
            </div>
          </div> 
        </div>
        
        <div class="page-warp-desctitle mt-24 bold">名称</div>
        <div class="page-warp-jobname bold f-16 mt-12">
          <el-input v-model="curdata.fullname" style="width: 600px" placeholder="请输入名称" />
        </div>
        <div class="page-warp-desctitle mt-24 bold">标题</div>
        <div class="page-warp-dsce mt-12">
          <el-input v-model="curdata.title" style="width: 600px" placeholder="请输入标题" />
        </div>
        <div class="page-warp-desctitle mt-24 bold">音色</div>
        <div class="page-warp-dsce mt-12">
          <el-select v-model="curdata.voice" placeholder="请选择音色" style="width: 600px">
            <el-option
              v-for="item in voiceList"
              :key="item.voice_type"
              :label="item.name"
              :value="item.voice_type"
            >
              <div class="flex-row space-between align-items-center">
                <div>{{ item.name }}</div>
                <div class="f-12 gray-color">
                  {{ item.scene }}-{{ item.language }}
                </div>
              </div>
            </el-option>
          </el-select>
        </div>
        <div class="page-warp-desctitle mt-24 bold">提示词</div>
        <div class="page-warp-desc mt-12">
          <el-input
            v-model="curdata.prompt"
            style="width: 100%"
            :rows="14"
            type="textarea"
            placeholder="请输入提示词"
          />
        </div>

        <div class="page-warp-desctitle mt-24 bold">开场白</div>
        <div class="page-warp-desc mt-12">
          <el-input
              v-model="curdata.prologue"
              style="width: 100%"
              :rows="8"
              type="textarea"
              placeholder="请输入开场白"
            />
        </div>
        <div class="page-warp-Btn mt-24 ">
          <el-button type="primary" @click="save" :loading="btnLoading">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, computed } from 'vue';
import { ArrowRight, Edit, Warning } from '@element-plus/icons-vue'
import { agentGetDetailInfo, agentUpdate, agentClone, agentCreate,  dictionaryDictionary, getRandomAvatar } from '@/api/api'
import { Toast } from '@/utils/vant'
import { getToken, setKeyItem, getKeyUserInfo} from '@/utils/auth'
import pkButton from '@/components/pkui/pkbutton/pkbutton.vue'
import { useRoute, useRouter} from 'vue-router'
const updataParam = reactive({
    Token: ""
  })
const route = useRoute()
const router = useRouter()
const jobName = ref("")
const curdata = ref({})
const voiceList = ref([])
const loading = ref(false)
const btnLoading = ref(false)
const getInit = () => {
  const { id } = route.query
  agentGetDetailInfo({
    agent_id: id
  }).then(res => {
    curdata.value = {
      ...res.data
    }
  }) 
}

const save = () => {
  const { id } = route.query
  if (!curdata.value.avatar) {
    Toast('头像未传')
    return
  }

  if (!curdata.value.fullname) {
    Toast('名称没有填写')
    return
  }

  if (!curdata.value.title) {
    Toast('标题没有填写')
    return
  }

  if (!curdata.value.voice) {
    Toast('音色没有选择')
    return
  }

  if (!curdata.value.prompt) {
    Toast('系统提示词没有填写')
    return
  }

  if (!curdata.value.prologue) {
    Toast('开场白没有填写')
    return
  }
  
  if (id) { 
    btnLoading.value = true
    agentUpdate({
      ...curdata.value,
      agent_id: id
    }).then(res => {
      btnLoading.value = false
      Toast('保存成功')
      router.go(-1)
    }).catch(err => {
      btnLoading.value = false
    })

  } else {
    btnLoading.value = true
    agentCreate({
      ...curdata.value,
    }).then(res => {
      btnLoading.value = false
      router.go(-1)
    }).catch(err => {
      btnLoading.value = false
    })  
  } 
}

const onSuccess = (e) => {
  curdata.value.avatar = e.data 
}

const copyItem = () => {
  loading.value = true
  agentClone().then(res => {
    curdata.value.prompt = res.data.prompt
    curdata.value.prologue = res.data.prologue
    loading.value = false
  }).catch(err => {
    loading.value = false
  })
}


const getdictionaryDictionary = () => {
  dictionaryDictionary().then(res => {
    voiceList.value = res.data.list
  }).catch(err => {
    loading.value = false
  })
}

const imgMathBtn = () => {
  getRandomAvatar().then(res => {
    console.log('----------------------------', res)
    curdata.value.avatar = res.data
  })
}

onMounted(() => {
  updataParam.Token = getToken()
  getInit()
  getdictionaryDictionary()
})
</script>

<style lang="scss" scoped>
.page-warp{
  padding-top: 60px;
  background: #fff;
  height: calc(100vh - 60px);
  overflow-y: auto;
  display: flex;
  &-layout{
    width: 988px;
    margin: 0 auto;
    font-size: 12px;
  } 

  &-avatar{
    width: 80px;
    height: 80px;
    border-radius:80px;
    border: #ddd 1px solid;
    background: #fff;
    position: relative;
    background-size: 120px auto !important;
  }

  &-avataredit{
    position: absolute;
    bottom: 0;
    right: -10px;
  }

  &-avatarText{
    position: absolute;
    bottom: 5px;
    right: -80px;
  }

  &-content{
    width: 600px;
    margin: 24px auto;
  }

  &-desctitle{
    text-align: left;
    width: 100%;
  }
  &-desc{
    width: 100%;
    border-radius: 12px;
    background: #fff;
    min-height: 100px;
  }

  &-Btn{
    margin-bottom: 60px;
  }
}
</style>